<template>
  <el-form :rules="rules" :model="memberDetail" ref="memberDetail">
    <el-table border :data="[memberDetail]" class="el-table-align-center">
      <el-table-column width="120" label="姓名">
        <template slot-scope="{row}">
          {{row.username}}
        </template>
      </el-table-column>
      <el-table-column width="100" label="玩家层级">
        <template slot-scope="{row}">
          {{row.levelName}}
        </template>
      </el-table-column>
      <el-table-column props="status" width="100" label="状态">
        <template slot-scope="{row,$index}">
          <member-status-tag :status="row.status"/>
        </template>
      </el-table-column>
      <el-table-column props="parentName" label="上级代理">
        <template slot-scope="{row}">
          {{row.parentName}}
        </template>
      </el-table-column>
      <el-table-column props="telephone" width="150" label="手机号码">
        <template slot-scope="{row}">
          <el-form-item prop="telephone" v-if="editAble" :required="false">
            <el-input v-model="row.telephone" auto-complete="off" @keyup.enter.native="onSubmit('memberDetail')"></el-input>
          </el-form-item>
          <div v-else>{{row.telephone}}</div>
        </template>
      </el-table-column>
      <el-table-column props="birthday" width="180" label="出生日期">
        <template slot-scope="{row}">
          {{row.birthday | toTime }}
        </template>
      </el-table-column>
      <el-table-column props="email" width="180" label="邮箱" :required="false">
        <template slot-scope="{row}">
          <el-form-item prop="email" v-if="editAble">
            <el-input v-model="row.email" auto-complete="off" @keyup.enter.native="onSubmit('memberDetail')"></el-input>
          </el-form-item>
          <div v-else>
            {{ row.email}}
          </div>
        </template>
      </el-table-column>
      <!--<el-table-column props="address" width="200" label="地址">-->
      <!--<template slot-scope="{row}">-->
      <!--<el-form-item prop="address" v-if="editAble" :required="false">-->
      <!--<el-input v-model="row.address" auto-complete="off"></el-input>-->
      <!--</el-form-item>-->

      <!--<div v-else>{{row.address}}</div>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column prop="registerDate" width="180" label="注册时间">
        <template slot-scope="scope">
          {{memberDetail.registerDate | toTime}}
        </template>
      </el-table-column>
      <el-table-column prop="registerIp" width="150" label="注册IP">
      </el-table-column>
     <el-table-column label="上次登录时间" align="center"  width="200">
        <template slot-scope="{row}">
          {{row.loginTime | toTime}}
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0" v-if="editAble">
      <el-button type="primary" @click="onSubmit('memberDetail')">申请修改</el-button>
      <el-button @click="resetForm('memberDetail')">取消</el-button>
    </div>
  </el-form>
</template>

<script>
  import {getMemberDetail} from '@/services/api/member'
  import MemberStatusTag from '@/components/MemberStatusTag'
  import {resetForm, factory,form} from '@/build';
  import ApplyDialog from "@/views/member/list/applyDialog";

  export default {
    name: "edit-member-info",
    props: {
      'member-id': {
        type: Number
      },
      //切换成带输入可编辑状态
      'edit-able': {
        type: Boolean,
        default: false
      }
    },
    mixins: [resetForm,form],
    components: {ApplyDialog, MemberStatusTag},
    data() {
      return {
        memberDetail: {},
        loading: false,
        isApply: false,
        rules: {
          name: [
            {required: true, message: '用户姓名不能为空', trigger: 'change'},
            {min: 2, max: 10, message: '用户姓名长度不对', trigger: 'change'}
          ],
          telephone: [
            {validator: factory.getValidator('mobile', {required: false}), trigger: 'blur'}
          ],
          email: [
            {validator: factory.getValidator('email', {required: false}), trigger: 'change'},
          ]
        },
      }
    },
    mounted() {
      const phoneShowPartial = this.roleCheck('phone-show-partial');
      const phoneShowAll = this.roleCheck('phone-show-all');
      const emailShowPartial = this.roleCheck('email-show-partial');
      const emailShowAll = this.roleCheck('email-show-all');
      this.bindGet(getMemberDetail,'memberDetail',{
        sendingData: {userId: this.$store.state.member.member_id},
        format:data => {
          data.telephone = _.formatUserPhoneEmail(data.telephone,phoneShowPartial,phoneShowAll);
          data.email = _.formatUserPhoneEmail(data.email,emailShowPartial,emailShowAll);
          return data;
        }
      });
      this.getAll();
    },
    methods: {
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.commit(types.SHOW_APPLY_MODAL, {data: this.memberDetail, from: 'memberInfo'})
          } else {
            return false;
          }
        })
      }
    }

  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
